<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页 - 区块链物流系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind CSS自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色主色调
                        secondary: '#10B981', // 绿色辅助色
                        accent: '#6366F1', // 紫色强调色
                        dark: '#1E293B', // 深色
                        light: '#F8FAFC' // 浅色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #f8fafc;
            background-image: radial-gradient(#e2e8f0 1px, transparent 1px), radial-gradient(#e2e8f0 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
        }
        .card-shadow {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .btn-hover {
            transition: all 0.3s ease-in-out;
        }
        .btn-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out forwards;
        }
    </style>
</head>
<body class="font-inter min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <i class="fa fa-link text-2xl text-primary mr-3"></i>
                    <h1 class="text-xl font-bold text-dark">区块链物流系统</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-gray-600">欢迎，<span id="username">用户</span></span>
                    <button onclick="logout()" class="bg-red-500 text-white px-4 py-2 rounded-lg btn-hover">
                        <i class="fa fa-sign-out mr-2"></i>退出
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏和主内容 -->
    <div class="flex">
        <!-- 侧边栏 -->
        <div class="w-64 bg-white shadow-sm min-h-screen">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">用户功能</h2>
                <ul class="space-y-2">
                    <li>
                        <button onclick="showSection('dashboard')" class="w-full text-left px-4 py-2 rounded-lg bg-primary text-white">
                            <i class="fa fa-dashboard mr-2"></i>仪表板
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('create-shipment')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-plus-circle mr-2"></i>创建运单
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('shipments')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-list-alt mr-2"></i>我的运单
                        </button>
                    </li>
                    <li>
                        <button onclick="showSection('profile')" class="w-full text-left px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-user mr-2"></i>个人信息
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 p-6">
            <!-- 仪表板 -->
            <div id="dashboard" class="section animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">用户仪表板</h2>
                
                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-file-text-o text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">总运单数</p>
                                <p class="text-2xl font-bold text-dark" id="total-shipments">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-green-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-check-circle text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">已完成</p>
                                <p class="text-2xl font-bold text-dark" id="completed-shipments">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 card-shadow">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-3 rounded-lg mr-4">
                                <i class="fa fa-clock-o text-yellow-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-gray-600">进行中</p>
                                <p class="text-2xl font-bold text-dark" id="pending-shipments">0</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近运单 -->
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <h3 class="text-lg font-semibold text-dark mb-4">最近运单</h3>
                    <div id="recent-shipments" class="space-y-3">
                        <p class="text-gray-500 text-center py-8">暂无运单记录</p>
                    </div>
                </div>
            </div>

            <!-- 创建运单 -->
            <div id="create-shipment" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">创建运单</h2>
                <div class="bg-white rounded-xl p-6 card-shadow max-w-2xl">
                    <form id="shipment-form" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">货物名称</label>
                                <input type="text" id="item-name" required
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                                    placeholder="请输入货物名称">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">货物重量(kg)</label>
                                <input type="number" id="item-weight" required
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                                    placeholder="请输入重量">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">发货地址</label>
                            <input type="text" id="from-address" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                                placeholder="请输入发货地址">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">收货地址</label>
                            <input type="text" id="to-address" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                                placeholder="请输入收货地址">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">备注信息</label>
                            <textarea id="shipment-notes"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary"
                                rows="3" placeholder="请输入备注信息（可选）"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-medium btn-hover">
                            <i class="fa fa-plus-circle mr-2"></i>创建运单
                        </button>
                    </form>
                </div>
            </div>

            <!-- 我的运单 -->
            <div id="shipments" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">我的运单</h2>
                <div class="bg-white rounded-xl p-6 card-shadow">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-dark">运单列表</h3>
                        <div class="flex space-x-2">
                            <button onclick="refreshShipments()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg btn-hover">
                                <i class="fa fa-refresh mr-2"></i>刷新
                            </button>
                        </div>
                    </div>
                    <div id="shipments-list" class="space-y-3">
                        <p class="text-gray-500 text-center py-8">暂无运单记录</p>
                    </div>
                </div>
            </div>

            <!-- 个人信息 -->
            <div id="profile" class="section hidden animate-fadeIn">
                <h2 class="text-2xl font-bold text-dark mb-6">个人信息</h2>
                <div class="bg-white rounded-xl p-6 card-shadow max-w-md">
                    <div class="text-center mb-6">
                        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-user text-3xl text-white"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-dark" id="profile-username">用户</h3>
                        <p class="text-gray-600" id="profile-id">ID: -</p>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">注册时间:</span>
                            <span class="text-dark" id="profile-register-time">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">总运单数:</span>
                            <span class="text-dark" id="profile-total-shipments">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 结果提示 -->
    <div id="result-message" class="fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 hidden"></div>

    <!-- JavaScript -->
    <script>
        const API_BASE = 'http://localhost:8080';
        let currentUserId = null;

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取用户信息
            const urlParams = new URLSearchParams(window.location.search);
            currentUserId = urlParams.get('id');
            const role = urlParams.get('role');
            
            if (!currentUserId || role !== 'user') {
                alert('请先登录');
                window.location.href = 'index.html';
                return;
            }

            // 初始化页面
            initializePage();
        });

        // 初始化页面
        function initializePage() {
            // 显示用户名
            document.getElementById('username').textContent = `用户 ${currentUserId}`;
            document.getElementById('profile-username').textContent = `用户 ${currentUserId}`;
            document.getElementById('profile-id').textContent = `ID: ${currentUserId}`;
            
            // 加载统计数据
            loadDashboardStats();
            
            // 默认显示仪表板
            showSection('dashboard');
        }

        // 显示消息
        function showMessage(message, isSuccess = true) {
            const messageDiv = document.getElementById('result-message');
            messageDiv.textContent = message;
            messageDiv.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50';
            messageDiv.classList.add(isSuccess ? 'bg-green-50', 'text-green-700', 'border', 'border-green-200' : 'bg-red-50', 'text-red-700', 'border', 'border-red-200');
            messageDiv.classList.remove('hidden');

            setTimeout(() => {
                messageDiv.classList.add('hidden');
            }, 3000);
        }

        // 切换页面部分
        function showSection(sectionName) {
            // 隐藏所有部分
            document.querySelectorAll('.section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // 显示选中的部分
            document.getElementById(sectionName).classList.remove('hidden');
            
            // 更新侧边栏按钮状态
            document.querySelectorAll('button').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('text-gray-600', 'hover:bg-gray-100');
            });
            
            // 设置当前选中按钮
            const currentBtn = document.querySelector(`button[onclick="showSection('${sectionName}')"]`);
            if (currentBtn) {
                currentBtn.classList.add('bg-primary', 'text-white');
                currentBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            }
            
            // 根据部分加载数据
            switch(sectionName) {
                case 'dashboard':
                    loadDashboardStats();
                    break;
                case 'shipments':
                    loadShipments();
                    break;
                case 'profile':
                    loadProfile();
                    break;
            }
        }

        // 加载仪表板统计数据
        async function loadDashboardStats() {
            try {
                // 这里应该调用后端API获取统计数据
                // 暂时使用模拟数据
                document.getElementById('total-shipments').textContent = '12';
                document.getElementById('completed-shipments').textContent = '8';
                document.getElementById('pending-shipments').textContent = '4';
                
                // 加载最近运单
                const recentShipmentsDiv = document.getElementById('recent-shipments');
                recentShipmentsDiv.innerHTML = `
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <span class="font-medium">电子产品</span>
                            <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">运输中</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从北京到上海</div>
                    </div>
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <span class="font-medium">服装</span>
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">已完成</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从广州到深圳</div>
                    </div>
                `;
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载运单列表
        async function loadShipments() {
            try {
                const shipmentsListDiv = document.getElementById('shipments-list');
                shipmentsListDiv.innerHTML = `
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="font-medium">电子产品</span>
                                <span class="text-sm text-gray-600 ml-2">#SH2024001</span>
                            </div>
                            <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">运输中</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从北京到上海 | 重量: 5kg</div>
                        <div class="text-xs text-gray-500 mt-1">创建时间: 2024-01-15</div>
                    </div>
                    <div class="border-b pb-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="font-medium">服装</span>
                                <span class="text-sm text-gray-600 ml-2">#SH2024002</span>
                            </div>
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">已完成</span>
                        </div>
                        <div class="text-sm text-gray-600 mt-1">从广州到深圳 | 重量: 3kg</div>
                        <div class="text-xs text-gray-500 mt-1">完成时间: 2024-01-10</div>
                    </div>
                `;
            } catch (error) {
                console.error('加载运单列表失败:', error);
                shipmentsListDiv.innerHTML = '<p class="text-red-500 text-center py-8">加载失败，请重试</p>';
            }
        }

        // 刷新运单列表
        function refreshShipments() {
            loadShipments();
            showMessage('运单列表已刷新', true);
        }

        // 加载个人信息
        function loadProfile() {
            document.getElementById('profile-register-time').textContent = '2024-01-01';
            document.getElementById('profile-total-shipments').textContent = '12';
        }

        // 处理创建运单表单
        document.getElementById('shipment-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const itemName = document.getElementById('item-name').value;
            const itemWeight = document.getElementById('item-weight').value;
            const fromAddress = document.getElementById('from-address').value;
            const toAddress = document.getElementById('to-address').value;
            const notes = document.getElementById('shipment-notes').value;

            try {
                // 这里应该调用后端API创建运单
                // 暂时模拟成功
                showMessage('运单创建成功！', true);
                document.getElementById('shipment-form').reset();
                
                // 刷新统计数据
                setTimeout(() => {
                    loadDashboardStats();
                }, 1000);
            } catch (error) {
                console.error('创建运单失败:', error);
                showMessage('创建运单失败，请重试', false);
            }
        });

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'index.html';
            }
        }
    </script>
</body>
</html>